/**
 * @author: andy
 * @description: 页面响应式布局功能
 */
import { throttle } from 'lodash-es';
import { type App } from 'vue';
type FlexConfig = {
  screenWidth: number;
  minFontSize: number;
  maxFontSize: number;
}
function setRem (docEl: HTMLElement , options: FlexConfig) {
  const { screenWidth , minFontSize , maxFontSize } = options; 
  let rem = docEl.clientWidth / (screenWidth * 0.01);
  if (rem < minFontSize) {
    rem = minFontSize;
  } else if (rem > maxFontSize) {
    rem = maxFontSize;
  }
  docEl.style.fontSize = rem + 'px';
}
function handleResize (docEl: HTMLElement , options: FlexConfig) {
  setRem(docEl , options);
}
export default {
  install (app: App , options: FlexConfig = {screenWidth : 1920 , minFontSize : 60 , maxFontSize : 100}) {
    const docEl = document.documentElement;
    setRem(docEl , options);
    window.addEventListener('resize' , throttle(handleResize , 200).bind(null , docEl , options));
  }
}